<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link rel="stylesheet" href="S.css" />
</head>
<body>
	<div style="width:500px;height:300px;position:absolute;left:300px;top:50px;" id="x1">
	
	</div>
	
	<div class="s-progressbar" id="x2">
				<div class="s-bar success">50%</div>
		</div>
</body>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="S.js"></script>
<script type="text/javascript">
	var progress = new S.ProgressBar({
		type:'info',
		val:0,
		el:S.E('x1'),
		change:function(val){
			if(val>60){
				this.$bar.addClass('danger');
			}else if(val>30){
				this.$bar.addClass('warn');
			}else{
				this.$bar.addClass('success');
			}
		}
	});
	
	var inter = setInterval(function() {
		progress.set(progress.value()+1);
		if(progress.value()>100){clearInterval(inter);}
	}, 300);
	
		var progress2 = new S.ProgressBar({
			el:'x2'
		});
		progress2.set(60);
</script>
</html>